@extends("backend.layout.main")

@section("after.css")
<link type="text/css" href="/backend/css/jquery.treeview.css" rel="Stylesheet">
<script src="/backend/js/jquery.hDialog.min.js"></script>
<script src="/backend/js/jquery.treeview.js"></script>
<style>

.group-left{position: absolute; top: 350px; width: 220px;}

.modal .modal-dialog{position: absolute; top: 30px; left: 50%; margin-left:-260px;z-index: 9; position: relative;}
.modal .modal-dialog #HCloseBtn{width:24px;height:24px;line-height:24px;display:inline-block;cursor:pointer;background-color:#fff;color:#666;font-size:1.4em;text-align:center;position:absolute;top:0px;right:0px;}
.modal .modal-dialog #HCloseBtn span{font-size:20px;display:inline-block;}
</style>
@endsection

@section("right_content")
<div class="mainWrapBox">
	<div class="mainBox">
		<h1><a href="">角色组</a> / 权限设计</h1>
		<div class="index-cen clearfix">
			@include('backend.layout.comset')
			<!--dementpart-->
			<div class="group-left mr10" id="main-left">
				<div class="group-lefta mb20">
					<h2 style="margin: 0;">类型列表
						<!--<span class="f_r"><a href="#" class="btn green" data-toggle="modal" data-target="#deptModal">创建类型</a></span>-->
					</h2>
					<div class="mt10 group-ov">
						<ul class="treeview" id="tree">
							<li id="tree2" class="collapsable"></li>
						</ul>
					</div>
				</div>
			</div>
			
			@include('backend.role.add_edit_type')
			<!-- company staff -->
			
			<div class="group-right mt10" id="main-right" style="min-height: 600px;">
                <div class="group-righta">
                    <h2 style="margin: 0;">
                          <span id="deptNameTitle" style="font-size: inherit;">全公司</span>
						  <input id="roleId" type="hidden" value="">

                          <span class="f_r">
                            <span class="search_divs">
                                <input class="input" style="width: 200px;" placeholder="搜索" id="keyword">
                                <input type="button" class="icon-search" id="btnSearch">
                            </span>
                            &nbsp;&nbsp;
                           <span class="addEmployeeBtn">
                            <a class="btn green">添加成员</a>
                           </span>
                        </span>

                    </h2>
                    <input type="hidden" id="deptIdTitle">
                    <input type="hidden" id="type" value="3">
   
                    <div class="group-rb">
                        <input type="hidden" name="start" id="start" value="0">
                        <input type="hidden" name="limit" id="limit" value="20">

                        <div id="deptUserList"> <table cellpadding="0" cellspacing="0" class="table left" id="yuang_table">
                            <thead class="table-header">
                            <tr>
                                <th style="width: 50px">
                                    <input type="checkbox" class="group-io" id="checkAll"></th>
                                <th style="width: 70px">姓名</th>
                                <th style="width: 200px">邮箱</th>
                                <th style="width: 100px">部门</th>
                                <th style="width: 100px">职务</th>
                                <th style="width: 100px">直属上级</th>
                                <th style="width: 100px">角色组</th>
                                <th style="width: 100px">操作</th>
                            </tr>
                            </thead>
                            <tbody class="table-body">
                                <tr>
                                    <td><div class="content-2line">
                                     <input type="checkbox" value="421" name="userId" data-username="丽丽" onclick="">
                                    </div></td>
                                    <td>丽丽</td>
                                    <td><div class="content-2line">23355776@qq.com</div></td>
                                    <td><div class="content-2line">
                                        
                                    </div></td>
                                    <td><div class="content-2line">
                                        
                                    </div></td>
                                    <td><div class="content-2line">
                                        
                                    </div></td>

                                            <td title="公司管理者"><div class="content-2line">
                                            公司管理者
                                            </div></td>
                                    <td>
                                    </td>
                                    <td>
                                        <a href="javascript:;" class="editDeptUser" data-id="696">编辑</a>
                                            <a href="" class="keaveDeptUser" data-id="696">禁用</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td><div class="content-2line">
                                            <input type="checkbox" value="21" name="userId" data-username="何乐为" onclick="">
                                    </div></td>
                                    <td>何乐为</td>
                                    <td><div class="content-2line">solia2@xcube.com.cn</div></td>
                                    <td><div class="content-2line">
                                        建筑三组
                                    </div></td>
                                    <td><div class="content-2line">
                                        成员
                                    </div></td>
                                    <td><div class="content-2line">
                                        李舒琪
                                    </div></td>

                                            <td title="业务团队成员"><div class="content-2line">
                                            业务团队成员
                                            </div></td>
                                    <td>
                                            2015-10-29 17:37:32
                                    </td>
                                    <td>
                                        <a href="javascript:;" class="editDeptUser" data-id="19">编辑</a>
                                            <a href="" class="keaveDeptUser" data-id="19">禁用</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <table class="table ">
                            <tbody class="table-footer">
                            <tr>
                                <td style="text-align: left;">
                                    <span>
                                        
                                    </span>
                                </td>
                                <td style="text-align: right; vertical-align: middle;"></td>
                                <td style="text-align: right;">
                                    <ul class="page_list right">
                                        <li class="up"><a href="javascript:void(0);" onclick="gotoPage(1);">&lt;</a></li>
                                        <li class="active"><a href="javascript:void(0);">1</a></li>
                                        <li><a href="javascript:void(0);" onclick="gotoPage(2);">2</a></li>
                                        <li><a href="javascript:void(0);" onclick="gotoPage(3);">3</a></li>
                                        <li class="next"><a href="javascript:void(0);" onclick="gotoPage(3);">&gt;</a></li>
                                    </ul>
                                </td>
                            </tr>
                            </tbody>
                        </table>
						
                        </div>
                    </div>
                </div>
            </div>
			<!--<div class="group-right mt10" id="main-right" style="min-height: 600px;"></div>-->
		</div>
	</div>
</div>

<script>

//部门列表
function queryDepartment() {
	$.ajax({
		url: "{{ URL::route('backend.role.roleList') }}",
		type: 'GET',
		dataType: 'json',
		cache:false,
		success: function (data) {
			var tree = '<span><strong>全类型</strong></span><div class="group-pa" data-fid="1" data-id="0" data-name="全公司"><span class="group-pa3"></span></div>';
			tree += deptsTreeHtml(data.deptsTree, 1);
			// console.log(tree);
			$("#tree2").html(tree);
			$("#listDept").html(deptsListHtml(data.depts));
			$("#listDept2").html(deptsListHtml(data.depts));
			listDept = data.depts;
			$(".treeview").treeview({
				collapsed: false,
				animated: "medium",
				control: "#sidetreecontrol",
				persist: "location",

			});
			//
			$('#deptModal').hide();
		}
	});
}
function deptsListHtml(depts) {
	var html = '';
	$.each(depts, function (index, ele) {
		html += "<li data-id='" + ele.id + "'><a href='javascript:;'>" + ele.name + "</a>"
				+ "<span class='right gouxuan'></span></li>";
	});
	html += '';
	return html;
}

function deptsTreeHtml(depts, child) {

	var html = '<ul class="treeview">';
	$.each(depts, function (index, ele) {
		
		var fid = child == 0 ? '-1' : 0; 
		html += "<li><span><strong>" + ele.name + "</strong></span>"
		+ "<div class='group-pa' data-id='" + ele.id + "' data-fid='"+ fid +"' data-name='" + ele.name + "'>";
		
		if(child == 1){
			html += "<span class='group-pa3'></span>"
				 + "<span class='group-pa2'></span>";
		}
		
		html += "<span class='group-pa1'></span>"
		+ "</div> ";
				
		if (ele.childDepartment.length > 0) {
		 	html += deptsTreeHtml(ele.childDepartment, 0);
		}
		html += "</li>";
	});
	html += '</ul>';
	return html;
}

// 编辑保存类型 / 角色 
function saveType(){
	var name = $('#name').val();
	if($.trim(name) == ''){
		alert('请填写名称');
		return false;
	}
	
	var param = $("#editForm").serialize();
	
	$.post('backend/role', param, function(d){
		// console.log('success');
		queryDepartment();	
	})
}

	
$(function(){
	
	 $("#tree").treeview({
            toggle: function() {
                console.log("%s was toggled.", $(this).find(">span").text());
            },
            animated: "fast",
        });
		
	
	 $("#tree_list2").find("em").bind("click", function () {
            tree_max(this);
        });

        function tree_max(obj) {
            var data = $(obj).attr("data");
            if (data == "off") {
                $(obj).parent().css("height", "auto");
                $(obj).parent().css("overflow", "visible");
                $(obj).text("-");
                $(obj).attr("data", "on");
            } else {
                $(obj).parent().css("height", "25px");
                $(obj).parent().css("overflow", "hidden");
                $(obj).text("+");
                $(obj).attr("data", "off");

            }
            var s_height = $("#tree_list2").height();
            if (s_height > 250) {
                $(".juese_text_right_main").css("overflow", "scroll");
                $(".juese_text_right_main").css("overflow-x", "hidden");
            } else {
                $(".juese_text_right_main").css("overflow", "");
                $(".juese_text_right_main").css("overflow-x", "");
            }
        }

        /*部门弹框js---end-*/
         $("#listDept").delegate("li", "click", function () {
            $("#pid").val($(this).find("span").attr("data-id"));
            $("#pname").val($(this).find("span").attr("data-name"));
            $(this).closest(".Pop_up_box").hide();
        });
        $("#orguserlist").delegate("li", "click", function () {
            $("#deptUserpid").val($(this).find("span").attr("data-id"));
            $("#deptUserpname").val($(this).find("span").attr("data-name"));
            $(this).closest(".Pop_up_box").hide();
        });
        $("#ranklist").delegate("li", "click", function () {
            $("#deptUserRankId").val($(this).find("span").attr("data-id"));
            $("#deptUserRankName").val($(this).find("span").attr("data-name"));
            $(this).closest(".Pop_up_box").hide();
        });
         $("#rolelistforAdd").delegate("li", "click", function () {
            event.stopPropagation();
            var display=$(this).find('span').css('display');
            if(display=='none'){
                $(this).find('span').css('display','block');
            }else{
                 $(this).find('span').css('display','none');
            }
            var li=$(this).parents().children('li');
            var data_id="";
            var data_name="";
            var count=0;
            for(var i=0;i<li.length;i++){       
                if(li.eq(i).find('span').css('display')=='block'){
                    count++;
                    if(count==1){
                        data_id=data_id+li.eq(i).find('span').attr('data-id');
                        data_name=data_name+li.eq(i).find('span').attr('data-name');
                    }else{
                        data_id=data_id+','+li.eq(i).find('span').attr('data-id');
                        data_name=data_name+','+li.eq(i).find('span').attr('data-name');
                    }               
                }           
            }
            $("#addUserRoleIds").val(data_id);
            $("#addUserRoleName").val(data_name);

            
        });


        $('body').click(function(){
            $('.Pop_up_box').hide();
        }); 

         $("#tree").delegate("li strong", "mouseenter", function (e) {
                $(this).parent().siblings(".group-pa").show();
                $(this).parents("ul").siblings(".group-pa").hide();
            });
        $("#tree").delegate("li", "mouseleave", function (e) {
                $(this).children(".group-pa").hide();
           });
 
         function formReset() {
            $("#editForm")[0].reset();
            $("#pid").val("");
            $("#id").val("");
            $("#fid").val("");
          }
		
		// 节点点击
		$("#tree").delegate("li>span", "click", function (e) {
			e.preventDefault();

			var id = $(this).siblings(".group-pa").attr("data-id");
			var fid = $(this).siblings(".group-pa").attr("data-fid");
			var name = $(this).siblings(".group-pa").attr("data-name");

			if(fid == '-1'){
				$('#roleId').val(id);
				$('#deptNameTitle').html(name);
				getRoleStaff(id);
			}
		});

		queryDepartment();

		
		/**
		 *添加子部门
		 */
		$("#tree").delegate("span[class='group-pa3']", "click", function () {
			formReset();
			var pid = $(this).parent("div").attr("data-id");
			var fid = $(this).parent("div").attr("data-fid");
			var pname = $(this).parent("div").attr("data-name");

			$("#pid").val(pid);
			$("#fid").val(fid);
			$("#pname").val(pname);
			$(".tr_parent").show();
			$("#deptModal").show();
		});
		/**
		 *编辑部门
		 */
		$("#tree").delegate("span[class='group-pa2']", "click", function () {
			formReset();
			var pid = $(this).parent("div").attr("data-id");
			var fid = $(this).parent("div").attr("data-fid");
			var pname = $(this).parent("div").attr("data-name");
			
			$("#id").val(pid);
			$("#pid").val(pid);
			$("#fid").val(fid);
			$("#name").val(pname);
			$(".tr_parent").hide();
			$("#deptModal").show();
		});
         
		//删除部门
       $("#tree").delegate("span[class='group-pa1']", "click", function () {
        var id = $(this).parent("div").attr("data-id");
		var fid = $(this).parent("div").attr("data-fid");
			$("#fid").val(fid);
			
        if (confirm("确定要删除这个部门吗?")) {
          $.post('/backend/role/'+id, {'_method': 'delete', 'fid':fid}, function(){
			
				queryDepartment();
		  })
        }
          
     });
	  
      $('.perMesg').mouseenter(function(){
          $(this).find('dd').addClass('showTrsm');
      }).mouseleave(function(){
        $(this).find('dd').removeClass('showTrsm');
      })
});
</script>

<!-- 添加/显示员工 -->
<script>
var roleUser = {};
$(function(){
	 $('.addEmployeeBtn a').click(function(){
		var roleId = $('#roleId').val();
		 
		if( roleId == '')
			alert('请先从左边选择角色组');
		else{
			
			$('ul.juese_text_left_main li span').css('display', 'none');
			$('ul.two_level').empty();
			
			$.each(roleUser, function(k,ele){
				console.log(ele.uid);
				
				$('#per_lisr .uid_'+ele.uid).find('span').css('display', 'block');
				$('ul.two_level').append('<!----><li class="uid_'+ ele.uid +'" data-uid="'+ ele.uid +'"><a href="javascript:;">'+ ele.username +'</a></li>');
			})

			$('#tuiduiModel').show();
		}
			
	 })
	 
	 $('#per_lisr').find('li').bind('click',function(){
		var display=$(this).find('span').css('display');
		var uid = $(this).data('uid');
		var name = $(this).find('a').text();
		
		if(display=='none'){
			$(this).find('span').css('display','block');
			var html = '<li class="uid_'+ uid +'" data-uid="'+ uid +'"><a href="javascript:;">'+ name +'</a></li>';
			$('ul.two_level').append(html);
		}else{
			$(this).find('span').css('display','none');
			$('ul.two_level .uid_'+uid).remove();
		}
	}) 
	$('#save').click(function(){
		var roleId = $('#roleId').val();
		var uidArr = [];
		$.each($("ul.two_level").find("li"),function(i,u){
			uidArr.push($(u).data('uid'));
		})
		
		$.post('backend/role/editstaff', {'uidArr': uidArr.join(), 'roleId':roleId}, function(){
			
			getRoleStaff(roleId);
			$('#tuiduiModel').hide();
		})
	})
}) 

function getRoleStaff(roleId){
	$.ajax({
		url: "backend/role/getrolestaff",
		type: 'GET',
		data: {'roleId':roleId},
		dataType: 'json',
		cache:false,
		success: function (data) {
				
				roleUser = data;
			var html = '';
			
			$.each(data, function(k,ele){
				html += '<tr><td><div class="content-2line"><input type="checkbox" value="'+ ele.uid +'" name="userId" data-username="'+ ele.username +'"></div></td>'
				+ '<td>' + ele.username + '</td>'
				+ '<td><div class="content-2line">' + ele.email + '</div></td>'
				+ '<td><div class="content-2line">                                  </div></td>'
				+ '<td><div class="content-2line"></div></td>'
				+ '<td><div class="content-2line"></div></td>'
				+ '<td><div class="content-2line"></div></td>'
				+ '<td><a href="javascript:;" class="editDeptUser" data-id="696">编辑</a><a href="" class="keaveDeptUser" data-id="696">禁用</a></td>'
				+ '</tr>';
			})
			
			$('.table-body').html(html);
		}
	});
}
getRoleStaff(0);
</script>

@endsection